/**
  @author: liump
  @date: 2019年5月7日11:52:26
  @latest update: 2019年6月29日16:37:07
  @module: tab 栏的地图功能 文员
  @log:
    1. 2019年5月7日 文员绘图回显
    2. 2019年5月30日 将测距的信息从 marker 的附件改到线段的中心点
  @option: 
    1.地图只读,根据接口数据渲染页面
    2.表格渲染,根据接口数据渲染表格
    3.点击编辑可以修改数据
    4.点击保存可以提交修改数据
  @params:
    proId: 当前项目编号
    proAMapData: 接口返回的数据
  @data:
    {
        details: [
          {
            at_point: 1, // 工作点，垂直作业使用
            end_point: 2, // 结束点，水平作业使用
            start_point: 1, // 起始点, 水平作业使用
            work_direction: 1, // 工作方向 0.水平 1.垂直
            work_length: "11", // 工作长度
            work_option: "1", "string", // 工作选项id
            work_message: "", // work_option 对应的所有工作内容明细
            work_type: 1, // 1.管道 2.线路 3.设备 4.溶纤 5.跳纤
            workload: 1 // workload (integer, optional): 重复次数
          }
        ],
        points: [
          { id: 1, prev: 0, lng: 113.742975, lat: 23.045348, distance: 0 },
          { id: 2, prev: 1, lng: 113.742782, lat: 23.043314, distance: 227.29 },
          { id: 3, prev: 2, lng: 113.74291, lat: 23.040668, distance: 294.84 },
          { id: 4, prev: 2, lng: 113.745528, lat: 23.043196, distance: 281.6 },
          { id: 5, prev: 4, lng: 113.745764, lat: 23.04053, distance: 297.76 }
        ],
        pro_id: "00001",
        pro_lnglat: []
      }
    }
 */
<template>
  <div class="pro-amap">
    <!-- 地图容器 Start -->
    <div class="amap">
      <div id="pro-amap"></div>
    </div>
    <!-- 地图容器 End and 数据展示列表 Start -->
    <div class="table" v-show="false">
      <div class="table-title">工作量总计</div>
      <div class="amap-all-table-header">
        <div
          :class="['amap-all-table-btn', changeTableBtnIndex == index?'amap-all-table-btn-active':'']"
          v-for="(item, index) of changeTableDataBtn"
          :key="index"
          @click="handleChangeTableBtn(index)"
        >{{item}}</div>
        <!-- <el-button icon="el-icon-edit" class="amap-all-table-header-update" @click="handleShowUpdateDataDialog">编辑</el-button> -->
        <!-- <el-button type="primary" @click="updataAllTableData">保存</el-button> -->
      </div>
      <div class="amap-table-content">
        <el-table
          :data="changePipelineTableData"
          border
          style="width: 100%"
          v-show="showTableContent"
        >
          <el-table-column fixed prop="node" label="线程/操作点" width="180" align="center"></el-table-column>
          <el-table-column prop="type" label="操作方式" width="180" align="center"></el-table-column>
          <el-table-column prop="work_name" label="工作内容" width="309" align="center"></el-table-column>
          <el-table-column prop="workload" label="数量" width="180" align="center"></el-table-column>
          <el-table-column prop="work_length" label="距离(米)" width="180" align="center"></el-table-column>
        </el-table>
        <el-table
          :data="changeEquipmentTableData"
          border
          style="width: 100%"
          v-show="!showTableContent"
        >
          <el-table-column fixed prop="node" label="操作点" width="180" align="center"></el-table-column>
          <el-table-column prop="lnglat" label="经纬度" width="319" align="center"></el-table-column>
          <el-table-column prop="work_name" label="工作内容" width="350" align="center"></el-table-column>
          <el-table-column prop="workload" label="数量" width="180" align="center"></el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 数据展示列表 End  -->
    <el-card class="table">
      <el-tabs type="card">
        <el-tab-pane label="线路工作内容">
          <el-table border style="width: 100%" :data="lineTableData">
            <el-table-column fixed prop="line" label="线程/操作点" width="120" align="center"></el-table-column>
            <el-table-column prop="lnglat" label="经纬度" width="200" align="center"></el-table-column>
            <el-table-column prop="work_name" label="工作内容" width="389" align="center"></el-table-column>
            <el-table-column label="数量" width="120" align="center">
              <template
                slot-scope="scope"
              >{{scope.row.workload ? scope.row.workload : scope.row.work_length}}</template>
            </el-table-column>
            <el-table-column prop="unit" label="单位" width="160" align="center"></el-table-column>
            <!-- <el-table-column fixed="right"
                           label="操作"
                           width="100"
                           align="center">
            <template slot-scope="scope">
              <span @click="handleDeleteLineData(scope.$index, scope.row)"
                    class="table-delete-row">删除</span>
            </template>
            </el-table-column>-->
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="设备工作内容">
          <el-table border style="width: 100%" :data="equipmentTableData">
            <el-table-column fixed prop="line" label="操作点" width="120" align="center"></el-table-column>
            <el-table-column prop="lnglat" label="经纬度" width="200" align="center"></el-table-column>
            <el-table-column prop="work_name" label="工作内容" width="389" align="center"></el-table-column>
            <el-table-column prop="workload" label="数量" width="120" align="center"></el-table-column>
            <el-table-column prop="unit" label="单位" width="160" align="center"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="熔纤工作内容">
          <el-table border style="width: 100%" :data="meltTableData">
            <el-table-column fixed prop="line" label="线程" width="120" align="center"></el-table-column>
            <el-table-column prop="equipment_point" label="设备点" width="200" align="center"></el-table-column>
            <el-table-column prop="work_name" label="工作内容" width="389" align="center"></el-table-column>
            <el-table-column prop="workload" label="数量" width="120" align="center"></el-table-column>
            <el-table-column prop="unit" label="单位" width="160" align="center"></el-table-column>
            <!-- <el-table-column fixed="right"
                           label="操作"
                           width="100"
                           align="center">
            <template slot-scope="scope">
              <span @click="handleDeleteMeltData(scope.$index, scope.row)"
                    class="table-delete-row">删除</span>
            </template>
            </el-table-column>-->
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import AMap from 'AMap' //在使用地图的页面引入该组件
export default {
  name: 'proAmap',
  props: {
    proAmapData: Object
  },
  data() {
    return {
      amap: null, // 地图初始化
      path: [], // 线段集合,每2点画一条线并清空
      polyline: null, // 折现对象初始化
      markers: [], // marker 对象的集合,用于存储 marker 对象,在获取线段中心点的时候需要 marker
      changeTableDataBtn: ['管道', '线路', '设备', '熔纤'],
      changeTableBtnIndex: 0, // 查看总工作量的时候切换按钮显示
      showTableContent: true, // 切换2种表格
      changePipelineTableData: [], // 表格1的数据切换, 管道/线路
      changeEquipmentTableData: [], // 表格2个数据切换, 设备/熔纤
      pipelineTableData: [], // 管道的数据
      lineTableData: [], // 线路的数据
      equipmentTableData: [], // 设备的数据
      meltTableData: [], // 熔纤的数据
      showUpdateDataDialog: false // 控制修改弹框是否显示
    }
  },
  methods: {
    /**
     * 挂载调用总方法
     */
    init() {
      // 初始化地图
      this.handleAMapInit()

      // 绘图(这里的参数应该是接口接到数据后父组件传过来的值)
      this.handleShowLine(this.proAmapData.points)

      // 表格数据加载
      // this.handleShowTableData(this.proAmapData.details);
      this.handleChangeAllTableData()
    },
    /**
     * 数据处理
     */
    handleShowTableData(details) {
      details.forEach(el => {
        switch (el.work_type) {
          case '1':
            if (el.work_direction == 0) {
              el.node = el.start_point + '-' + el.end_point
              el.type = '水平'
            } else {
              el.node = el.at_point
              el.type = '垂直'
            }
            this.pipelineTableData.push(el)
            break
          case '2':
            if (el.work_direction == 0) {
              el.node = el.start_point + '-' + el.end_point
              el.type = '水平'
            } else {
              el.node = el.at_point
              el.type = '垂直'
            }
            this.lineTableData.push(el)
            break
          case '3':
            el.node = el.at_point
            el.lnglat = this.handleSearchLnglat(el.node)
            this.equipmentTableData.push(el)
            break
          case '4':
            el.node = el.at_point
            el.lnglat = this.handleSearchLnglat(el.node)
            this.meltTableData.push(el)
            break
          default:
            break
        }
      })
      this.changePipelineTableData = this.pipelineTableData
    },
    handleSearchLnglat(point_code) {
      let lnglat = ''
      this.proAmapData.points.forEach(el => {
        if (el.point_code == point_code) {
          lnglat = el.lng + ',' + el.lat
        }
      })
      return lnglat
    },
    /**
     * AMap 地图初始化方法
     * @param lnglat 设置地图显示位置中心点,[lng, lat]
     */
    handleAMapInit() {
      this.amap = new AMap.Map('pro-amap', {
        resizeEnable: true,
        expandZoomRange: true,
        zoom: 18,
        zooms: [3, 20],
        center: this.proAmapData.pro_lnglat
      })
      // 挂载卫星地图图层(显示楼/绿化/路)
      let satelliteLayer = new AMap.TileLayer.Satellite()
      this.amap.add(satelliteLayer)
    },
    /**
     * 处理展示表格的方法
     * @method handleChangeAllTableData
     * @author liump
     */
    handleChangeAllTableData() {
      // 处理数据 this.proAmapData.details
      console.log(
        'TCL: handleChangeAllTableData -> this.proAmapData.details',
        this.proAmapData.details
      )
      let points = this.proAmapData.points
      this.proAmapData.details.forEach(el => {
        // 获取经纬度
        let lnglat = ''
        let point = el.at_point - 1
        if (point >= 0) {
          lnglat = points[point].lng + ',' + points[point].lat
        }
        el.lnglat = lnglat
        // 通过类型判断分类放入不同的数组中 2-线路 3-设备 4-熔纤
        switch (el.work_type) {
          case '2':
            this.lineTableData.push(el)
            break
          case '3':
            this.equipmentTableData.push(el)
            break
          case '4':
            el.equipment_point = points[point].tag
            this.meltTableData.push(el)
            break
          default:
            break
        }
      })
    },
    /**
     * 该方法通过传递过来的数据渲染页面
     * @param data 该参数是一个数组,每个元素必须是对象且包含 lng,lat,distance
     */
    handleShowLine(data) {
      // 根据传递过来的数据渲染页面
      // 对数组遍历,需要注意:
      // 1. 第一个点为起始点
      // 2. 每2个点绘制一个线段
      for (let i = 0; i < data.length; i++) {
        let el = data[i]
        let lnglat = [el.lng, el.lat]
        let tag = el.tag
        let pointType = el.pointType
        this.handleAddMarker(lnglat, el.point_code, el.distance, tag, pointType)
      }
      this.handleAddLine(data)
    },
    /**
     * 该方法是添加地图点标记函数,在点标记上点击右键可以开始绘制新的分支路线
     * @method handleAddMarer
     * @param lnglats 该参数是经纬度数组,例如 [lng, lat]
     * @param point_code 该参数是节点编号
     * @param distance 2个点之间的距离
     * @param tag 节点标题
     * @param pointType 节点类型,通过节点类型判断不同的图片生成
     */
    handleAddMarker(lnglats, point_code, dt = 0, tag, pointType) {
      // 测距信息窗
      var content = `<div class='marker-pro-amap'>`

      switch (pointType) {
        case 'D-OGJ':
          content += `<img src='/static/amap/d_ogj.png'>`
          content += `<div>${tag}</div>`
          break
        case 'D-NGJ':
          content += `<img src='/static/amap/d_ngj.png'>`
          content += `<div>${tag}</div>`
          break
        case 'D-OGF':
          content += `<img src='/static/amap/d_ogf.png'>`
          content += `<div>${tag}</div>`
          break
        case 'D-NGF':
          content += `<img src='/static/amap/d_ngf.png'>`
          content += `<div>${tag}</div>`
          break
        case 'W-JTH':
          content += `<img src='/static/amap/w_njth.png'>`
          content += `<div>${tag}</div>`
          break
        case 'W-YS':
          content += `<img src='/static/amap/w_ys.png'>`
          content += `<div>${tag}</div>`
          break
        case 'W-YX':
          content += `<img src='/static/amap/w_yx.png'>`
          content += `<div>${tag}</div>`
          break
        case 'W-NQBJG':
          content += `<img src='/static/amap/w_nqbjg.png'>`
          content += `<div>${tag}</div>`
          break
        case 'W-OQBJG':
          content += `<img src='/static/amap/w_oqbjg.png'>`
          content += `<div>${tag}</div>`
          break
        case 'W-PN':
          content += `<img src='/static/amap/w_pn.png'>`
          break
        default:
          content += `<img src='/static/amap/point.png'>`
          break
      }
      content += `</div>`

      this.marker = new AMap.Marker({
        position: lnglats,
        offset: new AMap.Pixel(-15, -15),
        content: content
      })
      // 存储 marker
      this.markers.push(this.marker)
      // 设置多个点标记
      this.marker.setMap(this.amap)
    },
    /**
     * 该方法是绘线的方法,但是划线必须一条一条划线
     * @param lnglats 该参数是经纬度数组,例如 [lng, lat]
     */
    handleAddLine(data) {
      // 遍历数据,将2个节点之间取经纬度并绘线
      for (let i = 0; i < data.length; i++) {
        var el = data[i]
        // 找到当前节点及上一个节点的经纬度
        var node = el.point_code // 当前节点编号
        var prevNode = el.prev_point_code // 上一个节点编号
        var nodeLnglat = [el.lng, el.lat] // 当前节点经纬度
        let distance = el.distance // 当前节点距上个点的距离
        var prevLnglat // 上一个节点经纬度
        if (prevNode == 0) {
          continue
        }
        for (let index = 0; index < data.length; index++) {
          var elem = data[index]
          if (elem.point_code === prevNode) {
            prevLnglat = [elem.lng, elem.lat]
          }
        }
        this.path.push(nodeLnglat, prevLnglat)
        this.polyline = new AMap.Polyline({
          path: this.path,
          strokeColor: '#1abc9c', // 线条颜色
          lineJoin: 'round' // 折线拐点连接处样式
        })
        // 通过当前节点和上一个节点的经纬度获取对应的 marker 对象,对象从 markers 中取
        // 第一个 marker,通过 prevLnglat -- 上一个节点经纬度获取 marker对象
        let p1
        this.markers.forEach((el, p_index) => {
          let prev_lnglat = el.getPosition()
          if (
            prev_lnglat.lng == prevLnglat[0] &&
            prev_lnglat.lat == prevLnglat[1]
          ) {
            p1 = this.markers[p_index].getPosition()
          }
        })
        // 第二个 marker
        let p2 = this.markers[i].getPosition()
        // 计算测距信息框中心点位置
        let textPos = p1.divideBy(2).add(p2.divideBy(2))
        let text = new AMap.Text({
          text: distance + '米',
          position: textPos,
          map: this.amap,
          style: {
            'background-color': '#1abc9c',
            'border-color': '#e1f5fe',
            color: '#fff',
            'font-size': '12px'
          }
        })
        // 将折线添加至地图实例
        this.amap.add(this.polyline)
        this.path = []
      }
    },
    /**
     * 切换总工作量表格
     * @param index 下标,根据下标切换数据
     */
    handleChangeTableBtn(index) {
      this.changeTableBtnIndex = index
      switch (index) {
        case 0:
          // 这是第一个按钮,管道数据显示
          this.showTableContent = true
          this.changePipelineTableData = this.pipelineTableData
          break
        case 1:
          // 这是第二个按钮,线路数据显示
          this.showTableContent = true
          this.changePipelineTableData = this.lineTableData
          break
        case 2:
          // 这是第三个按钮,设备数据显示
          this.showTableContent = false
          this.changeEquipmentTableData = this.equipmentTableData
          break
        case 3:
          // 这是第四个按钮,熔纤数据显示
          this.showTableContent = false
          this.changeEquipmentTableData = this.meltTableData
          break
        default:
          break
      }
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style scoped>
/* 建项审批列表最外层容器 pro-amap Start*/
.pro-amap {
  widows: 100%;
}
/* 建项审批列表最外层容器 pro-amap End and 地图容器 Start */
.amap {
  width: 100%;
  height: 500px;
  position: relative;
}
#pro-amap {
  position: absolute;
  width: 100%;
  height: 100%;
}
/* 地图容器 End and 数据展示列表 Start */
.table {
  width: 100%;
  margin-top: 20px;
}
.table-title {
  text-align: left;
  color: #949494;
  font-size: 16px;
}
.amap-all-table-header {
  display: flex;
  align-items: center;
  margin: 10px 0 20px;
}
.amap-all-table-btn {
  width: 120px;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
  border: 1px solid #e4e4e4;
}
.amap-all-table-btn:not(:first-child) {
  margin-left: 20px;
}
.amap-all-table-btn-active {
  background: #1abc9c;
  color: #fff;
}
.amap-all-table-header-update {
  margin-left: 300px;
}
/* 数据展示列表 End */
</style>

<!-- 在全局中修改地图的css -->
<style>
.pro-amap .marker-pro-amap {
  position: relative;
  width: 30px;
  height: 30px;
}
.pro-amap .marker-pro-amap img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.pro-amap .marker-pro-amap div:nth-child(2) {
  height: 20px;
  padding: 3px 6px;
  position: absolute;
  color: #ff0036;
  left: -10px;
  top: -30px;
}
.pro-amap .marker-pro-amap div:nth-child(3) {
  height: 20px;
  line-height: 20px;
  padding: 3px 6px;
  position: absolute;
  color: #ff0036;
  left: 6px;
  top: 6px;
}
</style>